/* 
    镜像管理展开的私有镜像子table
 */

 <template>
 <div>
     <el-table :show-header="false" :data="resourceC" style="width: 100%;" class="extend">
        <el-table-column width="150" prop="imageLabel" :formatter="formatterColumn" label="标签"></el-table-column>
        <el-table-column width="400" prop="command" :formatter="formatterColumn" label="pull命令"></el-table-column>
        <el-table-column width="150" prop="editor" :formatter="formatterColumn" label="作者"></el-table-column>
        <el-table-column width="200" prop="createTime" :formatter="formatterColumn" label="创建时间"></el-table-column>
        <el-table-column width="150" prop="tip" label="操作">
            <template slot-scope="scope">
                <el-button icon="el-icon-delete" plain type="danger" size="small"  class="small"  @click="deleteImage(scope.$index, scope.row)" :disabled="deleteDisabled">删除</el-button>
                <el-button icon="el-icon-tickets" plain type="info" size="small"  class="small"  @click="openImageVersionDescribedDailog(scope.$index, scope.row)" >版本明细</el-button>
            </template>
        </el-table-column>
        <el-table-column></el-table-column>
    </el-table>

    <!-- 镜像版本说明维护.start -->
    <el-dialog  title="镜像版本明细维护"  :visible.sync="imageVersionDescrebedDialogVisible">
		<el-form status-icon :model="imageVersionDescrebedForm" ref="imageVersionDescrebedForm" :rules="imageVersionDescrebedRules">
			<el-form-item label="镜像" :label-width="formLabelWidth" prop="image">
				<el-input type="text" v-model="imageVersionDescrebedForm.image" :disabled="true" ></el-input>
			</el-form-item>

			<el-form-item label="版本" :label-width="formLabelWidth" prop="version">
				<el-input  type="text" v-model="imageVersionDescrebedForm.version" :disabled="true" ></el-input>
			</el-form-item>

			<el-form-item label="说明" :label-width="formLabelWidth" prop="described">
				<el-input  type="textarea" v-model="imageVersionDescrebedForm.described" ></el-input>
			</el-form-item>

			<div class="form-btn" style="text-align:center">
			    <el-button class="iconfont icon-fanhui" @click="imageVersionDescrebedDialogVisible = false">取 消</el-button>
				<el-button class="iconfont icon-fuxuan" type="primary" @click="editImageVersionDescribed" >确 定</el-button>
			</div>
		</el-form>
	</el-dialog>
    <!-- 镜像版本说明维护.end -->

 </div>
    


    
</template>
<script>
//scope 是父组件传递过来的
export default {
  data() {
    
    // 检验手机号码
    const _validateDescribed = (rule, value, callback) => {
		if (value.length == 0 ) {
				callback(new Error('描述不能为空'));
		} else {
				callback();
		}
    };
      
    return {
        resourceC: [],
        deleteDisabled: false,
        ///////////////////////////////////////////////////////////////////////////////////
        // 镜像版本信息说明
        formLabelWidth: '80px',
        imageVersionDescrebedDialogVisible: false,
        imageVersionDescrebedForm: {
            id: '',
            image: '',
            version: '',
            described: '',
            user:'',
        },
        imageVersionDescrebedRules: {
            described: [
                { required: true, trigger: 'blur', validator: _validateDescribed }
            ]
        },
    };
  },
  props: {
    scope: Object, // $index/row/store  你可以看scope 这个对象，这个页面有很多简化的
    deleteBtnDisabled: false,
    afterDeleteFun: undefined
  },
  mounted() {
    //scope.row 可以获取这个row的信息比如id什么的,
    //异步获取数据 赋值给 resourceC 即可
    // 加载数据
    // console.log('v-child-table=' + JSON.stringify(this.scope.row))
    let param = {
      reponame: this.scope.row.repoName
    };
    this.httpClient
      .httpClientget(this.projectConfig.URL_API_APP_REPOSITORY_GET_IMAGE, param)
      .then(res => {
        // let _code = res.meta.code;
        // if (_code == this.projectConfig.CODE_OK) {
        //     // 加载数据
        //     this.resourceC = res.data;
        //     this.deleteDisabled = this.deleteBtnDisabled;
        //     this.operationDisable = this.operationBtnDisable;
        // } else {
        //     // 重置页面
        //     this.resourceC = [];
        // }
        this.resourceC = res.data;
        this.deleteDisabled = this.deleteBtnDisabled;
        this.operationDisable = this.operationBtnDisable;
      });
  },
  methods: {
    formatterColumn: function(row, column, cellValue) {
      if (column.property == "imageLabel") {
        return "版本:" + cellValue;
      }
      if (column.property == "command") {
        return cellValue;
      }
      if (column.property == "editor") {
        return cellValue;
      }
      if (column.property == "createTime") {
        return cellValue;
      }
    },
    // 删除单个镜像
    deleteImage: function(index, row) {
      // console.log('deleteImage=' + JSON.stringify(row));
      // 删除确认
      this.$confirm("此操作将永久删除此镜像, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 执行删除操作
          let param = {
            repoName: this.scope.row.repoName,
            tags: row.imageLabel
          };
          // console.log(param);
          // let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_APP_DELETE_IMAGE,["?nameRepo=",this.scope.row.repoName,"&tags=",row.imageLabel]);
          // console.log(url);
          // 操作审计
          this.userBaseInfo.setOperObjectName(this.scope.row.repoName + ':' + row.imageLabel);
          this.httpClient
            .httpClientDelete(
              this.projectConfig.URL_API_APP_DELETE_IMAGE,
              param
            )
            .then(res => {
              if (this.afterDeleteFun != undefined) {
                this.afterDeleteFun();
              }
              this.resourceC.pop(row);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    ////////////////////////////设置镜像版本明细说明////////////////////////////////
    // 打开镜像版本信息维护的页面
    openImageVersionDescribedDailog: function(index, row)  {
        this.imageVersionDescrebedDialogVisible = true;
        // 赋值
        this.imageVersionDescrebedForm.image = row.command.substring(row.command.indexOf('/') + 1,row.command.indexOf(':'));
        this.imageVersionDescrebedForm.version = row.imageLabel;
        let param = {
            image: this.imageVersionDescrebedForm.image,
            version: this.imageVersionDescrebedForm.version
        };
        // 获取镜像版本描述
        this.httpClient.httpClientget(this.projectConfig.URL_API_APP_GET_IMAGE_VERSION_DESCRIBED,param).then(res => {
            this.imageVersionDescrebedForm.described = res.data.described;
            this.imageVersionDescrebedForm.id = res.data.id;
        })
    },
    editImageVersionDescribed() {
        // 校验
        this.$refs.imageVersionDescrebedForm.validate(valid => {
            if (valid) {
                this.imageVersionDescrebedForm.user = this.userBaseInfo.getUserId();

                if (this.imageVersionDescrebedForm.id.length == 32) {
                    this.userBaseInfo.setOperObjectName(this.imageVersionDescrebedForm.image + ':' + this.imageVersionDescrebedForm.version);
                    // 修改
                    this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_GET_IMAGE_VERSION_DESCRIBED,this.imageVersionDescrebedForm).then(res => {
                        
                    })
                } else {
                    this.userBaseInfo.setOperObjectName(this.imageVersionDescrebedForm.image + ':' + this.imageVersionDescrebedForm.version);
                    // 新增
                    this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_GET_IMAGE_VERSION_DESCRIBED,this.imageVersionDescrebedForm).then(res => {

                    })
                }

                this.imageVersionDescrebedDialogVisible = false;
            }
        })
        
    },
  }
};
</script>